<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>生物实验数据分析云平台</title>
    <link href="../styles/main_ui_light.css" rel="stylesheet" />
    <link rel="stylesheet" href="../styles/common.css">
    <script src="../scripts/common.js"></script>
    <script src="../libs/vue.min.js"></script>
    <script src="../libs/jquery.js"></script>
    <script src="../scripts/md5.js"></script>
    <script src="../scripts/main_ui.js"></script>


</head>
<body>
    <div  id="vue_app">
        <div class="header" style="background-image:url(../images/banner.png);background-size: contain">
            <img src="../images/Logo.jpg" width="80" height="80" style="margin: 5px"/>
            <label style="position:absolute; margin:20px; font-size:38px; color:white ">生物分析云平台</label>
            <span id="user_div" style="position:absolute;right:10px;margin:10px; width: 190px;height: 80px;">
                <div id="manager_center_id" style="float:left;visibility:hidden;">
                    <a href="javascript:void(0);" target="_parent" class="toptitle" style="margin-left:10px;" onclick="manager_center()">管理中心</a>
                    <span onmousedown="return false" unselectable="on" style="color: #798699;"> | </span>
                </div>

                <a href="javascript:void(0);" target="_parent" class="toptitle" style="margin-left:10px;" onclick="user_center()">用户中心</a>
                <span onmousedown="return false" unselectable="on" style="color: #798699;"> | </span>
                <a href="../index.html" target="_parent" class="toptitle" onclick="exist_login()">退出</a>
                <br>
                <div style="margin-top: 15px;margin-left: 70px;">
                    <img src="../images/user.png" class="user_icon" style="top: -3px;"/>
                    <a id="user_id_name" class="user_title" >张三</a>
                </div>

            </span>
            <!--<div id="user_info" style="float:right; margin:5px; width: 180px;height: 80px;">
                <a href="http://service.mail.qq.com" target="_blank" class="toptitle">用户中心</a>
                <span class="addrtitle" onmousedown="return false" unselectable="on" style="color: #798699;"> | </span>
                <a href="" target="_parent" class="toptitle">退出</a>
            </div>-->
        </div>
        <div class="content">
            <div class="menu">
                <!--
                <a href="htmls/my_project.html" target="frameContext" class="menuToggle">我的项目</a> </br>
                <a href="htmls/my_data.html" target="frameContext" class="menuToggle">我的数据</a> </br>
                <a href="htmls/apps_center.html" target="frameContext" class="menuToggle">分析中心</a> </br>
                <a href="htmls/tools_center.html" target="frameContext" class="menuToggle">工具中心</a> </br>
                -->
                <div style="margin: 20px 10px 20px 10px;">
                    <!--<input class="menuToggle" type="radio" name="menu" id="projTgl" v-on:click="tglClick($event)" checked hidden/>
                    <label class="menuLabel" for="projTgl">我的项目</label>
                    <input class="menuToggle" type="radio" name="menu" id="dataTgl" v-on:click="tglClick($event)" hidden/>
                    <label class="menuLabel" for="dataTgl">我的数据</label>
                    <input class="menuToggle" type="radio" name="menu" id="appTgl" v-on:click="tglClick($event)" hidden/>
                    <label class="menuLabel" for="appTgl">分析中心</label>
                    <input class="menuToggle" type="radio" name="menu" id="toolTgl" v-on:click="tglClick($event)" hidden/>
                    <label class="menuLabel" for="toolTgl">工具中心</label>
                    <input class="menuToggle" type="radio" name="menu" id="helpTgl" v-on:click="tglClick($event)" hidden/>
                    <label class="menuLabel" for="helpTgl">帮助中心</label>-->
                    <input class="menuToggle" type="radio" name="menu" id="projTgl" onclick="tglClick(this)" checked hidden/>
                    <label class="menuLabel" for="projTgl">我的项目</label>
                    <input class="menuToggle" type="radio" name="menu" id="dataTgl" onclick="tglClick(this)" hidden/>
                    <label class="menuLabel" for="dataTgl">我的数据</label>
                    <input class="menuToggle" type="radio" name="menu" id="appTgl" onclick="tglClick(this)" hidden/>
                    <label class="menuLabel" for="appTgl">分析中心</label>
                    <input class="menuToggle" type="radio" name="menu" id="toolTgl" onclick="tglClick(this)" hidden/>
                    <label class="menuLabel" for="toolTgl">工具中心</label>
                    <input class="menuToggle" type="radio" name="menu" id="helpTgl" onclick="tglClick(this)" hidden/>
                    <label class="menuLabel" for="helpTgl">帮助中心</label>
                </div>
            </div>

            <div class="box">
                <div class="container">
                    <iframe v-bind:src="url" name="frameContext" frameborder="0" id="frameContext" style="width:100%;min-height:600px;" scrolling="no"
                           onload="changeFrameHeight(this)" >
                    </iframe>
                </div>
            </div>
        </div>
        <div class="footer">foot</div>

    </div>

    <div id="password-dialog" class="wrap-dialog hide">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title">修改密码</span>
            </div>
            <form id="password_form" action="http://47.104.102.188:7979/api/user/password/change" method="post" target="_self">
                <div class="dialog-body" style="text-align:left;padding: 10px;">
                    <div class="input_elem"><!---->
                        <input id="current_password" name="current_password" class="input_inner" type="password" placeholder="输入旧密码" required
                               validateevent="true" autocomplete="off" rows="2">
                    </div>
                    <div class="input_elem"><!---->
                        <input id="new_password" name="new_password" class="input_inner" type="password" required placeholder="输入新密码" required
                               validateevent="true" autocomplete="off" rows="2">
                    </div>
                    <div class="input_elem"><!---->
                        <input id="new_password2" name="new_password2" class="input_inner" type="password"  required placeholder="再次输入新密码"
                               validateevent="true" autocomplete="off" rows="2">
                    </div>
                </div>

                <div class="dialog-footer">
                    <input type="submit" class="button_blue_style" id="confirm" style="width: 80px;" value="确认"/>
                    <input type="button" class="button_blue_style" id="cancel" style="width: 80px;" value="取消" onclick="changeCancel()"/>
                </div>
            </form>
        </div>
    </div>

    <div id="invite-dialog" class="wrap-dialog hide">
        <div class="dialog">
            <div class="dialog-header">
                <span class="dialog-title">生成邀请码</span>
            </div>
            <div class="dialog-body" style="text-align:left;padding: 15px;">
                <input type="button" class="button_blue_style" style="width: 80px;" value="生成邀请码" onclick="gen_invite_code()"/>
                <div style="height: 24px;margin: 10px">
                    <label id="invidte-label" ></label>
                </div>

            </div>
            <div class="dialog-footer">
                <input type="button" class="button_blue_style" style="width: 80px;" value="关闭" onclick="$('#invite-dialog').css('display', 'none');"/>
            </div>

        </div>
    </div>

    <div class="user_center" style="display: none">
        <div >
            <div class="info_item">
                <img src="../images/user1.png" class="user_icon"/>
                <lable id="user_id_name2" class="user_title" style="font-size: 13px;">张三</lable>
            </div>
            <div class="info_item">
                <img src="../images/email.png"  class="user_icon" />
                <lable id="user_email" class="user_title" style="font-size: 12px;">张三</lable>
            </div>
            <div class="info_item">
                <button class="menuLabel" onclick="change_password()"
                        style="width:200px;line-height:28px;color: white;background-color:dodgerblue;" >修改密码</button>
            </div>
        </div>
    </div>

    <div id="messagebox_id" class="wrap-message-box hide">
        <div class="message-box" style="width: 240px">
            <div class="message-box-header">
                <span id="msgbox_title" class="message-box-title">处理结果</span>
            </div>
            <div class="message-box-body">
                <div id="res_info" style="font-size: 13px;color: #5490f3">信息提示</div>
            </div>
            <div class="message-box-footer" >
                <input type="button" class="button_blue_style" style="width: 120px;" value="关闭" onclick="MessageBox('hide')"/>
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#vue_app',
            data:{
                url:"./main/my_project.html",
            },
            methods: {
                tglClick : function (e) {
                    console.log(e.target.id);
                    switch(e.target.id)
                    {
                        case "projTgl":
                            this.url = "./main/my_project.html";
                            break;
                        case "dataTgl":
                            this.url = "./main/my_data.html";
                            break;
                        case "appTgl":
                            this.url = "./main/apps_center.html";
                            break;
                        case "toolTgl":
                            this.url = "./main/tools_center.html";
                            break;
                        case "helpTgl":
                            this.url = "./main/helps_center.html";
                            break;
                        default:
                            break;
                    }
                }
            }
        })
    </script>
</body>
</html>